<template>
    <div class="ml-16px mr-16px statistics">
        <ul>
            <li>
                <p>浏览量(PV)<el-tooltip placement="top">
                    <template #content> 即通常说的PV（PageView）值，<br />用户每打开1个网站页面，记录1个PV。<br />用户多次打开同一页面PV累计多次 </template>
                    <div slot="content" class="ml-5px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip></p>
                <b>{{ statistics.PV }}</b>
            </li>
            <li>
                <p>访客数(UV)<el-tooltip placement="top">
                    <template #content> 1天（00:00-24:00）之内，访问网站的不重复用户数<br />（以浏览器cookie为依据），一天内同一访客多次访<br />问网站只被计算1次 </template>
                    <div slot="content" class="ml-5px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip></p>
                <b>{{ statistics.UV }}</b>
            </li>
            <li>
                <p>IP<el-tooltip placement="top">
                    <template #content> 1天（00:00-24:00）之内，访问网站的不重复IP数。<br />一天内相同IP地址多次访问网站只被计算1次 </template>
                    <div slot="content" class="ml-5px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip></p>
                <b>{{ statistics.IP }}</b>
            </li>
            <li>
                <p>跳出率<el-tooltip placement="top">
                    <template #content> 仅浏览了1个页面就离开网站的访问(会话)次数占<br />总访问次数的比率。跳出率=跳出次数/访问次数 </template>
                    <div slot="content" class="ml-5px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip></p>
                <b>{{ statistics.JumpOut || '-' }}</b>
            </li>
            <li>
                <p>平均访问时长<el-tooltip placement="top">
                    <template #content> 平均每次访问(会话)在网站上的停留时间。平均访问时<br />长=访问时长/访问次数。体现网站对访客的吸引程度 </template>
                    <div slot="content" class="ml-5px">
                        <svg-icon size="14px" icon-class="information-2-fill" class="text-#999"></svg-icon>
                    </div>
                </el-tooltip></p>
                <b>{{ statistics.AverageDuration || '-' }}</b>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { IStatistics } from '@/api/sem/types'

defineProps<{
    statistics: IStatistics
}>()
</script>

<style lang="scss" scoped>
.statistics{
    background-color: var(--mainBg);
    border-radius: 8px;
    ul{
        display: flex;
        li{
            flex: 1;
            padding:14px 0 14px 40px;
            p{
                font-size: 12px;
                color: #999999;
                display: flex;
            }
            b{
                font-size: 22px;
                font-family: 'Din Web';
                padding-top: 8px;
                display: block;
            }
        }
    }
}
</style>